<template>
  <div>
    <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="40%"
        center>
        <div>
          <div style="display: flex;justify-content: space-between;
          margin-bottom: 20px;border-bottom: 2px solid #ccc;padding-bottom: 10px;"
          >
            <span >{{qufenbianji?'编辑通讯表计':'新增通讯表计'}}</span>
            <span @click="guanbi"><i class="el-icon-close"></i></span>
          </div>
          <div>
            <el-form :model="form" :rules="rules" ref="ruleForm"  >
              <el-row>
                <el-col :span="12">
                <el-form-item label="设备名称" prop="deviceName">
                  <el-input v-model="form.deviceName" size="small" style="width: 180px;"></el-input>
                </el-form-item>
              </el-col>
                 <el-col :span="12">
                <el-form-item label="所属企业" prop="companyNo">
                  <el-select v-model="form.companyNo"  size="small" style="width: 180px;" :disabled="true">
                    <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.orgName" :value="item.companyNo" class="dengji"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                <el-form-item label="表计地址" prop="deviceTag">
                  <el-input v-model="form.deviceTag" size="small" style="width: 180px;" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采集通道" prop="channelTag">
                  <el-select v-model="form.channelTag"  size="small" style="width: 180px;" :disabled="isshow" @change="change">
                    <el-option v-for="(item,index) in tongdaolist" :key="index" :label="item.text" :value="item.value" class="dengji"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="表计型号" prop="deviceModel">
                  <el-select v-model="form.deviceModel"  size="small" style="width: 180px;" :disabled="isshow">
                    <el-option v-for="(item,index) in wanguanlist" :key="index" :label="item.typeName" :value="item.typeCode" class="dengji"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否启用" prop="enabled">
                  <el-switch  active-color="#13ce66" v-model="form.enabled" :disabled="isshow"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
              <el-row>
              <el-col :span="12">
                <el-form-item label="CT变比" label-width="80px">
                  <el-input v-model="form.ct" size="small" style="width: 180px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="PT变比" label-width="80px">
                  <el-input v-model="form.pt" size="small" style="width: 180px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            </el-form>
          </div>                               
        </div>
        <div>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit" size="small">保存</el-button>
        </span>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import {getleftlistapi,gettongdaoxialaapi,posttongxunapi,putwulianapi,getwangguanapi}from '@/api/iot'
export default {
  name: 'CallPoliceTongxun',
  props: {
    biaojiobj: {
      type:Object
    },
    qufenbianji: {
      type:String
    },
    companyNo: {
      type:String
    },
    fuzhinewupobj: {
      type:Object
    },
    orgName: {
      type:String
    }
},
  data() {
    return {
      form: { pt: '1', ct: '1',deviceName:'', deviceTag:'',channelTag:''},
      rules: {
        deviceName: [
            { required: true, message: '设备名称必填', trigger: 'blur' }
        ],
        deviceTag: [
            { required: true, message: '网关地址必填', trigger: 'blur' }
        ],
        enabled: [
        { required: true, message: '是否启用必选', trigger: 'blur' }
        ],
        channelTag: [
        { required: true, message: '采集通道必选', trigger: 'blur' }
        ],
        companyNo: [
            { required: true, message: '所属企业必选', trigger: 'blur' }
        ],
        deviceModel: [
          { required: true, message: '表计型号必选', trigger: 'blur' }
      ]
      },
      qiyelist: [],
      tongdaolist: [],
      dialogVisible: false,
      isshow: false,
      wanguanlist:[]
    };
  },
  async mounted() {
    // const res = await getleftlistapi()
    //  this.qiyelist=res.data.list
    const ress = await gettongdaoxialaapi({type:'CommMeter'})
    this.tongdaolist = ress.data.list
  },
  methods: {
    async submit() {
      await this.$refs.ruleForm.validate()
      if (this.qufenbianji) {
        const deviceName = encodeURIComponent(this.form.deviceName)
        const deviceTag = encodeURIComponent(this.form.deviceTag)
        // deviceTag
        await putwulianapi({ct:this.form.ct,pt:this.form.pt,deviceId:this.form.deviceId,deviceName:deviceName,deviceTag})
      } else {
        const deviceNames = encodeURIComponent(this.form.deviceName)
        const deviceTags = encodeURIComponent(this.form.deviceTag)
        const {deviceName,deviceTag,...obj}=this.form
        await posttongxunapi({...obj,deviceName:deviceNames,ct:this.form.ct?this.form.ct:'',pt:this.form.pt?this.form.pt:'',deviceTag:deviceTags})
      }
      this.$emit('shuaxin')
      this.guanbi()
    },
    guanbi() {
      this.dialogVisible = false
      this.$emit('bianji');
      this.$refs.ruleForm.resetFields()
      this.isshow = false
      this.$emit('fuzhi')
    },
    async change(val) {
      const res = await getwangguanapi({ channelTag: val })
      this.wanguanlist = res.data.list
    }
  },
  watch: {
    immediate: true,
    dialogVisible(val) {
      if (val) {
        if (this.qufenbianji !== '') {
          console.log(this.biaojiobj,5555);
          
        this.form = this.biaojiobj
        this.isshow = true
        } else {
        console.log(6666);
        
          if (this.fuzhinewupobj.deviceId) {
            console.log(this.fuzhinewupobj,777777);
            
            this.form = {...this.fuzhinewupobj }
          } else {
            this.form = {}
            this.$set(this.form,'ct', '1')
            this.$set(this.form,'pt', '1')
        }this.qiyelist=[{orgName:this.orgName,companyNo:this.companyNo}]
          this.form.companyNo = this.qiyelist.filter(ele => ele.companyNo == this.companyNo)[0].companyNo
      }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header{
  display: none;
}
</style>